demoPanel {visibility: hidden; display: flex; flex-direction: column; position: fixed; overflow: hidden; border: 1px outset hsla(202, 20%, 50%, 0.47); border-radius: 11px; box-shadow: 0 0 0 1px hsla(0,0%,100%,0.5), 0 0 0 3px hsla(211,60%,85%,0.4), 2px 4px 25px hsla(200,35%,30%,0.35); background: white; z-index:2} demoPanel.visible {visibility: visible; animation: emerge 0.5s 1 cubic-bezier(0.67, 0.04, 0.25, 0.96);} @keyframes emerge { from {opacity:0; transform: scale(0.5)} } demoPanel.active {z-index: 3} demoPanel:not(.menu) {height: initial !important} demoPanel > header {display: flex; align-items: center; justify-content: space-between; background: linear-gradient(white,hsla(210,40%,86%,1)) no-repeat;background-origin: border-box;padding: 0px 0px;color: hsla(210,100%,20%,0.8);text-shadow: 1px 1px white;box-shadow: 0 2px 3px hsla(210, 100%, 5%, 0.18);z-index: 1;border-bottom: 1px solid hsla(210, 100%, 20%, 0.25);cursor: move;flex-shrink: 0;} demoPanel > header > btn {border: 0px solid hsla(210, 40%, 75%, 0.33);background: hsla(0, 0%, 100%, 0.64);background-clip: padding-box;color: hsla(208,40%,40%,1);white-space: nowrap; cursor: default} demoPanel > header > btn[back] {font-size: 11px;line-height: 12px;display: flex;align-items: center;padding: 5px 6px 5px 4px;border-right-width: 1px;opacity: 0.8;} demoPanel:-webkit-any(.menu,.loneDemo) > header > btn[back] {visibility: hidden; font-size: 0} demoPanel > header > btn[back]::before {content:'<'; font: 43px/11px symbols;margin-right: 5px;} demoPanel > header > btn[close] {padding: 7px;border-left-width: 1px;opacity: 0.4;} demoPanel > header > btn[close]::before {content: '\D7';font: 18px symbols;} demoPanel > header > btn:hover {background: hsla(0, 0%, 100%, 0.9); opacity: 1;} demoPanel > header > :-webkit-any(tit, dfltTit) {font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px;} demoPanel.menu > header > tit, demoPanel:not(.menu) > header > dfltTit {display: none} demoPanel > content {position: relative;} demoPanel.menu > content {display: flex; flex-direction: column; align-items: center; overflow: auto; flex-grow: 1; background: radial-gradient(ellipse at top, white 50%, hsla(210,50%,98%,1) 80%);} demoPanel demoMenu {padding: 10px 20px;max-width: 100%;} demoPanel demoMenu.noShrink {max-width: initial} demoPanel.menu demo, demoPanel:not(.menu) demoMenu {display: none} demoPanel demoMenu ul {padding: 0;} demoPanel demoMenu li {list-style: none;display: flex;align-items: center;padding: 12px 20px 12px 18px;border: 2px outset transparent;border-radius: 40px;margin: 0px 0;color: hsl(205,100%,34%);letter-spacing: 0.4px;} demoPanel demoMenu li:hover {border-color: hsla(210, 90%, 86%, 0.6);background: linear-gradient(white,hsla(200,25%,96%,1),white) no-repeat;color: hsl(200,100%,38%);box-shadow: 0 2px 3px hsla(210, 100%, 40%, 0.15);text-shadow: 0 0 1px hsla(200,100%,40%,0.67), 1.5px 1.5px 0.5px white;} demoPanel demoMenu li > i {border: 1px outset hsla(200, 100%, 90%, 0.85);background: radial-gradient(white 14%, hsla(224,90%,89%,1) , hsla(200,70%,90%,1) 80%); color: #ffffff; text-shadow: -0.7px -1px rgba(0, 0, 0, 0.5), 0px 1px rgba(255, 255, 255, 0.7); box-shadow: 1px 1px 2px rgba(0, 16, 97, 0.21);border-radius: 100%;padding: 5px 4.6px 5px 6px;margin: 4px 14px 4px 4px;font: 32px/13px symbols;} demoPanel demoMenu li > i::before {content: '\25B8'} demoPanel demoMenu li:hover > i {box-shadow: 0px 0px 3px hsla(230, 100%, 19%, 0.7), 3px 3px 2px hsla(220, 100%, 20%, 0.18); -webkit-filter: saturate(1.8);} demoPanel demoMenu li > img {margin-right: 16px;-webkit-filter: drop-shadow(1px 1px 2px hsla(210,40%,87%,1));} demoPanel demoMenu li > img[src*=kbdKeys] {-webkit-filter:none} demoPanel demoMenu li > t { font-size: 16px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; position: relative; top: -1px; } demoPanel demoPH {display: flex;background: none;border: none;box-shadow: none;min-width: initial;max-width: initial; min-height: initial; position: absolute; top: 0; left: 0; width: 100%; height: 100%; align-items: center; justify-content: center; pointer-events: none;} demoPanel demoPH:not(._)::before {content: none;} demoPanel demo {display: flex} demoPanel step:not(._) {border: none;border-radius: 0;} 